<template>
    <div class="body">
        <input type="text" v-model="user" @focus="onfocusa" :placeholder="placeholdera" @blur="blura">
        <input type="text" v-model="pasw" @focus="onfocusb" :placeholder="placeholderb" @blur="blurb">
        <button type="button" @click="login">登录</button>
    </div>
</template>
<script>
export default {
    name:'login',
    data(){
        return{
            placeholdera:"请输入用户名",
            placeholderb:"请输入密码",
            user:"",
            pasw:""
        }
    },
    methods:{
        onfocusa(){
            this.placeholdera = ""
        },
        onfocusb(){
            this.placeholderb = ""
        },
        blura(){
            this.placeholdera="请输入用户名"
        },
        blurb(){
            this.placeholderb="请输入密码"
        },
        login(){
            let data = {
                username: this.user,
                password: this.pasw
            }
            // this.$http({
            //     method:"post",
            //     url:"http://localhost:8443/login",
            //     data:data
            // }).then((res)=>{
            //     console.log(res)
            // })
            this.$router.push({
                path:"/index/welcome"
            })
        }
    }
}
</script>
<style lang="less" scoped>  
    .body{
        width: 100vw;
        height: 100vh;
        background-image: url(./../../assets/img/loginBg.png);
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        input{
            width: 400px;
            height: 40px;
            margin-bottom: 20px;
            border-radius: 20px;
            border: 0;
            outline: none;
            text-align: center;
            opacity: 0.7;
            color: #333333;
            font-size: 20px;
        }
        button{
            width: 400px;
            height: 40px;
            line-height:40px;
            border-radius: 20px;
            background-color: skyblue;
            text-align: center;
            border: 0;
            outline: none;
            color: aliceblue;
            font-size: 25px;
            letter-spacing:20px;
            text-align: center;
        }
    }
</style>